<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/common.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 280px;
            margin: 50px auto;
            background-color: pink;
            /* color: #ff6700; */
            line-height: 40px;
        }

        .time {
            height: 60px;
            background-color: pink;
            border-bottom: 1px solid gray;
            font-size: 20px;
            line-height: 60px;
        }

        .header {
            height: 40px;
            color: aliceblue;
            line-height: 40px;
            overflow: hidden;
        }

        .header span {
            float: left;
            text-align: center;
            margin-top: 10px;
            line-height: 40px;
        }

        .prev,
        .next {
            width: 20%;
            line-height: 40px;
            cursor: pointer;
        }

        .current {
            width: 60%;
            line-height: 40px;
        }

        .week {
            overflow: hidden;
        }

        .week li {
            width: 40px;
            text-align: center;
            float: left;
            line-height: 40px;
        }

        .content {
            overflow: hidden;
        }

        .content li {
            width: 40px;
            text-align: center;
            float: left;
            line-height: 40px;
        }

        .prev,
        .next {
            color: grey;
        }
        .theLast,.theNext{
            color: grey;
        }

        .now {
            color: #000;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- <div class="time"></div> -->
        <div class="header">
            <span class="prev">上</span>
            <span class="current"></span>
            <span class="next">下</span>
        </div>
        <ul class="week">
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
            <li>日</li>
        </ul>
        <ul class="content">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
            <li>07</li>
            <li>08</li>
            <li>09</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
            <li>26</li>
            <li>27</li>
            <li>28</li>
            <li>29</li>
            <li>30</li>
            <li>31</li>
            <li>32</li>
            <li>33</li>
            <li>34</li>
            <li>35</li>
            <li>36</li>
            <li>37</li>
            <li>38</li>
            <li>39</li>
            <li>40</li>
            <li>41</li>
            <li>42</li>
        </ul>
    </div>
</body>
<script>
    var prev = document.getElementsByClassName("prev")[0];
    var current = document.getElementsByClassName("current")[0];
    var next = document.getElementsByClassName("next")[0];
    var content = document.getElementsByClassName("content")[0];


    
    var date = new Date();  // 全局变量  1.  页面加载时的当前时间  2. 用来记录上下月点击切换后的日期

    // 月份提示
    var year = date.getFullYear();
    var month = date.getMonth()+1;
    current.innerText = `${year}年${month}月`;


    // 日历创建
    var week = getFirstDayWeek(date);
    // console.log(week);

    var lastMonthDays =  getLastMonthDays(date);
    // console.log(lastMonthDays);

    var thisMonthDays =  getThisMonthDays(date);
    // console.log(thisMonthDays);


    // 上个月   起始值 lastMonthDays - week + 2
    var html = "";
    for(var i= lastMonthDays - (week-1) + 1;i <= lastMonthDays; i++){
        html += `<li class="theLast">${i}</li>`;
    }

    // 当前月
    for(var i = 1; i <= thisMonthDays; i++){
        html += `<li>${i}</li>`;
    }

    // 下个月
    for(var i = 1; i <= 42 - (week -1) - thisMonthDays; i++){
        html += `<li  class="theNext">${i}</li>`;
    }

    // console.log(html);
    content.innerHTML = html;

</script>
</html>